<template>
  <div :style="bgimg">

  <div style="padding-top: 10%;width: 100%;height: 100%;" >

    <div style="margin-left: 35%">
      <el-tabs v-model="activeName" style="width: 45%">
        <el-tab-pane label="账户登录" name="first">
          <el-form ref="form" :model="form" label-width="80px" style="width: 100%">
            <el-form-item label="用户名">
              <el-input placeholder="请输入登录名" v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="短信/邮箱 登录" name="second">

          <el-form ref="form" :model="form" label-width="85px" style="width: 100%">
            <el-form-item label="手机/邮箱">
              <el-input placeholder="请输入手机号/邮箱" v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input placeholder="请输入内容" v-model="form.password" >
<!--                <el-button slot="append"  @click="getMessageCode">点击获取验证码</el-button>-->
                <el-button @click="getMessageCode" slot="append"  :disabled="isDisabled">{{buttonName}}</el-button>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>
      </el-tabs>


      <el-breadcrumb separator="|" style="margin-left:20%;margin-top: 50px">
        <el-breadcrumb-item >
          <el-link @click="toRegister">立即注册</el-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <el-link @click="forgetPassword">忘记密码</el-link>
        </el-breadcrumb-item>
      </el-breadcrumb>

    </div>



  </div>
  </div>

</template>

<script>
    export default {
        name: "login",
        data() {
          return {
            bgimg:{
              backgroundImage:"url(" + require('../../assets/s.jpg') + ")",
              backgroundRepeat: "no-repeat",
              height:"800px",
              width:"100%",
              overflow:"hidden",
              backgroundSize:"cover"
            },
            activeName: 'first',
            form: {
              userName: '',
              password: '',
              phoneNumber:"",
              checkcode:""
            },
            buttonName: "发送短信",
            isDisabled: false,
            time: 60
          }
        },
       methods:{
         onSubmit(){
            this.$axios.post(this.$gloableData.serverPath+"auth/forLogin",this.$data.form).then((response)=>{
                console.log(response.data)
                if(response.data.code==1006){
                  //存储Token到本地
                  window.localStorage.removeItem("token")
                  window.localStorage.setItem("token",response.headers["token"])
                  console.log("跳转页面")
                  //存储用户信息，这是一个用户的登录名
                  let loginName=""+response.data.userInfo;
                  console.log("已经储存到本地userinfo中"+loginName)
                  //this.$store.state.userId=uuid;

                  window.localStorage.setItem("userInfo",loginName)
                  //跳转到home界面
                  this.$router.push({params:{
                      uname:loginName
                    },name:"home"})
s
                }else{
                  this.$message.error('登录失败，用户名或密码错误！');
                }
            }).catch((error=>{
              console.log("捕获错误对象")
              this.$message.error(JSON.stringify(error.data));
            }))
         },
         getMessageCode(){
           //alert("验证码登录")
           if (this.form.userName==""){
             console.log(this.form.phoneNumber)
             alert("请输入手机号")
             this.isDisabled=true
             window.location.reload()
           }else {
             let me = this;
             me.isDisabled = true;
             let interval = window.setInterval(function() {
               me.buttonName = '（' + me.time + '秒）后重新发送';
               --me.time;
               if(me.time < 0) {
                 me.buttonName = "重新发送";
                 me.time = 20;
                 me.isDisabled = false;
                 window.clearInterval(interval);
               }
             }, 2000);

           }
           this.$axios.post(this.$gloableData.serverPath+"auth/telcode/sg?phone="+this.$data.form.userName).then(res=>{
                  console.log(res.data)
           })
         },
         toRegister(){
           this.$router.push("/register")
         },
         forgetPassword(){
           this.$router.push("/forgetPass")
         }
       }
    }
 </script>

<style scoped>

</style>
